// console.log('OK');

// 导入 react 依赖
import React from 'react'; //创建组件，虚拟dom元素，生命周期
import ReactDOM from 'react-dom'; //将创建好的东西放在页面上
import Login from '@/components/Login';
import Button from '@/components/Button';

// 导入演示代码
// import '@/LESSONS/es6-class';
// import '@/LESSONS/extends';
import Register from '@/LESSONS/creactComponentByClass';
import CommentList from '@/LESSONS/componentWithStyle';
import BindInputValue from '@/components/BindInputValue';

// 创建虚拟DOM
// 参数一：标签名
// 参数二：属性（Object）
// 参数三：子节点
// const h1 = React.createElement('h1', {
//   title: 'lalala'
// }, 'h1');

const div = <div id="dv"> JSX </div>;

// 渲染元素到指定的容器
// 参数一：需要加载到页面上的DOM节点
// 参数二：加载到的容器（需要使用元素js获取DOM元素的方式）
ReactDOM.render(div, document.getElementById('app'));

const person = {
  name: '小明',
  age: '18',
  gender: '男'
};

// 组件的创建
// 不使用扩展yu
// function Hello (props) {
//   return  <div>
//     <h1>Hello</h1>
//     <h1>{props.person.name}</h1>
//   </div>
// }

// ReactDOM.render(<div>
//   <Hello person={person}></Hello>
//   </div>,

//   document.getElementById('app'));

function Hello(props) {
  return (
    <div>
      <h1> Hello </h1> <h1> {props.name} </h1>{' '}
    </div>
  );
}

ReactDOM.render(
  <div>
    <h2>简单组件创建：</h2>
    <Hello {...person}> </Hello>
    <hr />
    <h2>组件分离（使用.jsx文件）：</h2>
    <Login />
    <hr />
    <h2>给组件添加样式</h2>
    <CommentList />
    <hr />
    <h2>给组件添加事件</h2>
    <Button />
    <hr />
    <h2>数据的双向绑定（借助onChange事件）</h2>
    <BindInputValue />
    <hr />
  </div>,

  document.getElementById('app')
);
